<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<!-- 
		<view class="nav-bar">
			<view class="left">
				<u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
			</view>
			<view class="title">健康指标</view>
			<view class="right"></view>
		</view> 
		-->
		
		<!-- 内容区域 -->
		<view class="content">
			<!-- 指标卡片 -->
			<view class="metric-card" v-for="(metric, index) in metrics" :key="index" @click="goToDetail(metric.field)">
				<view class="header">
					<view class="left">
						<text class="title">{{metric.title}}</text>
						<text class="time">{{metric.time}}</text>
					</view>
					<view class="right">
						<text class="value" :class="metric.status">{{metric.value}}</text>
						<text class="unit">{{metric.unit}}</text>
					</view>
				</view>
				
				<view class="chart">
					<!-- 这里可以集成echarts等图表库显示趋势图 -->
					<view class="placeholder">趋势图占位</view>
				</view>
				
				<view class="footer">
					<view class="status-tag" :class="metric.status">
						<text>{{metric.statusText}}</text>
					</view>
					<view class="reference">
						<text>参考范围：{{metric.reference}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getUserIndicatorInfo } from '@/common/api.js'

export default {
  data() {
    return {
      userIndicator: {},
      metrics: [],
      metricTypes: ['血压', '血糖', '心率'], // 仅用于添加记录弹窗
      selectedType: '',
      inputValue: '',
      measureTime: '',
      showPopup: false,
    }
  },
  onLoad() {
    this.loadUserIndicator()
  },
  methods: {
    async loadUserIndicator() {
      try {
        const res = await getUserIndicatorInfo()
        this.userIndicator = res.data || {}
        const time = this.userIndicator.createTime || '' // 假设返回有 createTime

        // 构造字段展示卡片
        this.metrics = [
          this.formatMetric('sbp', '收缩压', this.userIndicator.sbp, 'mmHg', '90-140mmHg', time),
          this.formatMetric('dbp','舒张压', this.userIndicator.dbp, 'mmHg', '60-90mmHg', time),
          this.formatMetric('bloodSugar','血糖', this.userIndicator.bloodSugar, 'mmol/L', '3.9-6.1mmol/L', time),
          this.formatMetric('tc','总胆固醇', this.userIndicator.tc, 'mmol/L', '<5.2mmol/L', time),
          this.formatMetric('ldlC','低密度脂蛋白胆固醇', this.userIndicator.ldlC, 'mmol/L', '<3.4mmol/L', time),
          this.formatMetric('hdlC','高密度脂蛋白胆固醇', this.userIndicator.hdlC, 'mmol/L', '>1.0mmol/L', time),
          this.formatMetric('tg','甘油三酯', this.userIndicator.tg, 'mmol/L', '<1.7mmol/L', time),
          this.formatMetric('weight','体重', this.userIndicator.weight, 'kg', '因人而异', time),
          this.formatMetric('waist','腰围', this.userIndicator.waist, 'cm', '男性<90cm 女性<85cm', time),
          this.formatMetric('exerciseDuration','锻炼时长', this.userIndicator.exerciseDuration, '分钟/天', '≥30分钟', time),
          this.formatMetric('smoke','吸烟支数', this.userIndicator.smoke, '支/天', '0支为佳', time),
          this.formatMetric('drink','饮酒克数', this.userIndicator.drink, '克/天', '男性<25g 女性<15g', time),
          this.formatMetric('vegFruit','蔬菜水果摄入', this.userIndicator.vegFruit, '份/天', '≥5份', time)
        ].filter(Boolean) // 过滤掉空字段
      } catch (err) {
        console.error('加载用户健康指标失败', err)
      }
    },

    // 格式化每个指标卡片对象
    formatMetric(field, title, value, unit, reference, time) {
      if (value === null || value === undefined || value === '') return null

      const status = this.getStatus(title, value)
      const statusTextMap = {
        normal: '正常',
        warning: '偏高/偏低',
		high:'偏高',
		low:'偏低',
        danger: '异常'
      }

      return {
		field,
        title,
        time: time || '',
        value: value.toString(),
        unit,
        status,
        statusText: statusTextMap[status],
        reference
      }
    },

    // 简单的状态判断逻辑（可根据需要完善）
    getStatus(title, value) {
      const v = parseFloat(value)
      switch (title) {
        case '收缩压':
		    if (v >= 90 && v <= 120){
				return 'normal';
			}else if (v > 120 && v < 139){
		      return 'high';
		    } else{
				return 'danger';
			}
        case '舒张压':
		    if (v >= 60 && v <= 80){
				return 'normal';
			}else if (v > 80 && v < 89){
		      return 'high';
		    } else{
				return 'danger';
			}
        case '血糖':
			if (v < 6.1){
				return 'normal';
			}else if (v >= 6.1 && v < 7.0){
			  return 'high';
			} else{
				return 'danger';
			}
        case '总胆固醇':
			if (v < 5.18){
				return 'normal';
			}else if (v >= 5.18 && v < 6.22){
			  return 'high';
			} else{
				return 'danger';
			}
        case '低密度脂蛋白胆固醇':
		    if (v < 3.37){
		    	return 'normal';
		    }else if (v >= 3.37 && v < 4.14){
		      return 'high';
		    } else{
		    	return 'danger';
		    }
        case '高密度脂蛋白胆固醇':
          return v < 1.04 ? 'danger' : 'normal'
		case '甘油三酯':
			if (v < 1.7){
				return 'normal';
			}else if (v >= 1.7 && v < 2.26){
			  return 'high';
			} else{
				return 'danger';
			}
		case '腰围':
			if (v < 85){
				return 'normal';
			}else if (v >= 85 && v < 90){
			  return 'high';
			} else{
				return 'danger';
			}
        default:
          return 'normal'
      }
0    },
    goToDetail(field) {
	    uni.navigateTo({
		url: `/pages/my/healthIndicator-detail?field=${field}`//`/pages/indicator/detail?field=${field}`
	  })
	},

    showAddModal() {
      this.showPopup = true
    },
    handleTypeChange(e) {
      this.selectedType = this.metricTypes[e.detail.value]
    },
    handleTimeChange(e) {
      this.measureTime = e.detail.value
    }
  }
}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #F7F7FA;
		
		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.content {
			padding: 30rpx;
			padding-bottom: 120rpx;
			
			.metric-card {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				
				.header {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					margin-bottom: 30rpx;
					
					.left {
						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
							display: block;
							margin-bottom: 8rpx;
						}
						
						.time {
							font-size: 24rpx;
							color: #999;
						}
					}
					
					.right {
						text-align: right;
						
						.value {
							font-size: 40rpx;
							font-weight: bold;
							margin-right: 8rpx;
							
							&.normal {
								color: #52c41a;
							}
							
							&.warning {
								color: #faad14;
							}
							&.high {
								color: #faad14;
							}
							&.low {
								color: #faad14;
							}
							
							&.danger {
								color: #ff4d4f;
							}
						}
						
						.unit {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
				
				.chart {
					height: 200rpx;
					background-color: #F7F7FA;
					border-radius: 12rpx;
					margin-bottom: 30rpx;
					
					.placeholder {
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #999;
					}
				}
				
				.footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.status-tag {
						padding: 4rpx 16rpx;
						border-radius: 20rpx;
						
						&.normal {
							background-color: #f6ffed;
							
							text {
								color: #52c41a;
							}
						}
						
						&.warning {
							background-color: #fffbe6;
							
							text {
								color: #faad14;
							}
						}
						
						&.danger {
							background-color: #fff2f0;
							
							text {
								color: #ff4d4f;
							}
						}
						
						text {
							font-size: 24rpx;
						}
					}
					
					.reference {
						text {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}
			
			.add-btn {
				position: fixed;
				bottom: 40rpx;
				left: 30rpx;
				right: 30rpx;
				height: 88rpx;
				background-color: #1890FF;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				text {
					font-size: 32rpx;
					color: #fff;
					font-weight: bold;
					margin-left: 12rpx;
				}
			}
		}
		
		.popup-content {
			background-color: #fff;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			
			.popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 2rpx solid #f5f5f5;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
			}
			
			.form {
				padding: 30rpx;
				
				.form-item {
					margin-bottom: 30rpx;
					
					.label {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 16rpx;
						display: block;
					}
					
					input {
						height: 80rpx;
						background-color: #F7F7FA;
						border-radius: 8rpx;
						padding: 0 20rpx;
						font-size: 28rpx;
						color: #333;
					}
					
					.picker {
						height: 80rpx;
						background-color: #F7F7FA;
						border-radius: 8rpx;
						padding: 0 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						text {
							font-size: 28rpx;
							color: #333;
						}
					}
				}
			}
			
			.popup-footer {
				padding: 30rpx;
				border-top: 2rpx solid #f5f5f5;
				
				.submit-btn {
					height: 88rpx;
					background-color: #1890FF;
					border-radius: 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					text {
						font-size: 32rpx;
						color: #fff;
						font-weight: bold;
					}
				}
			}
		}
	}
</style> 